<template>
    <a-drawer
      title="条件"
      :visible="dialog"
      :maskStyle="{background: 'transparent'}"
      :maskClosable="false"
      width="500"
      @close="cancel"
    >
      <div class="worksheet_trigger_body">
          <div class="worksheet_trigger_form">
            <a-form-model layout="vertical" :model="form">
              <a-form-model-item label="触发条件">
                <a-button type="primary" @click="handleButtonAddFilter" v-show="filters.length === 0">添加条件</a-button>
                <div v-for="(item, index) in filters" :key="item.uuid">
                  <workflow-filter-list
                    :filter='item'
                    :index="index"
                    :output="output"
                    :showOr="index === filters.length - 1"
                    @addFilter="handleAddFilter"
                    @addChildFilter="handleAddChildFilter"
                    @deleteChildFilter="handleDeleteChildFilter"
                  />
                </div>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div class="worksheet_trigger_foot">
            <a-button type="primary" @click="save">
              保存
            </a-button>
            <a-button @click="cancel">
              取消
            </a-button>
          </div>
      </div>
    </a-drawer>
</template>
<script>
import {getNodeOutput} from "@/api/appWorkflow"
import {uuid} from "@/utils/utils"
import {DataType} from '@/filterConstant'
import WorkflowFilterList from "../workflowFilterList.vue"
export default {
  components: {
    WorkflowFilterList
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data () {
    return {
      DataType,
      form: {
        
      },
      fields: [],
      filters: [],
      output: [],
    }
  },
  watch: {
    dialog: {
      async handler (val) {
        if(this.dialog){
          let output = await getNodeOutput({
            automationId: this.id,
            nodeId: this.node.nodeId
          })
          this.output = output
          this.filters = this.node?.inputs?.filters ? this.node?.inputs?.filters.map(c => ({uuid: uuid(), data: c})): []
        }
      },
      deep: true,
    },
  },
  methods: {
    async handleButtonAddFilter(){
      // this.save(true)
      
      let output = await getNodeOutput({
        automationId: this.id,
        nodeId: this.node.nodeId
      })
      this.output = output.filter(o => o!== null)
      this.handleAddFilter()
    },
    handleAddFilter(){
      let obj = this.getFilterObj()
      this.filters.push({
        uuid: uuid(),
        data: [obj]
      })
    },
    handleAddChildFilter(index){
      let obj = this.getFilterObj()
      let filter = this.filters.find(c => c.uuid === index)
      filter.data.push(obj)
    },
    handleDeleteChildFilter(index, uuid){
      let filter = this.filters.find(c => c.uuid === index)
      filter.data = filter.data.filter(c => c.uuid !== uuid)
      if(filter.data.length === 0){
        this.filters = this.filters.filter(c => c.uuid !== index)
      }
    },
    getFilterObj(){
      let obj = {
        uuid: uuid(),
        field: '',
        filterType: '',
        values: [''],
        dateRange: null,
        dataType: 0,
        value: 0
      }
      return obj
    },
    cancel () {
      this.$emit('update:dialog', false)
    },
    save(){
      this.node.inputs.filters = this.filters.map(f => f.data)
      this.$emit('update:dialog', false)
      
      this.$emit('save')
    }
  },
  computed:{
    id(){
      return this.$route.params.id
    },
  }
}
</script>
